import 'package:base_plugin/base_plugin.dart';
import 'package:finance_app/src/common/app_colors.dart';
import 'package:finance_app/src/widgets/form/form_edit_status_inherited_widget.dart';
import 'package:finance_app/src/widgets/wrapper/normal_form_wrapper.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/services.dart';
import 'package:flutter_svg/svg.dart';
import 'package:finance_app/generated/a.dart';

class TextAreaInputForm extends StatefulWidget {
  final String tip;
  final TextEditingController controller;
  final FocusNode focusNode;
  final String helpText;
  final bool hasError;
  final TextInputType keyboardType;
  final List<TextInputFormatter> inputFormatters;
  final String title;
  final String error;
  final bool isVisibleError;
  final int maxSize;

  const TextAreaInputForm({
    Key key,
    this.helpText,
    this.maxSize = 150,
    this.keyboardType,
    this.inputFormatters,
    this.hasError = false,
    this.tip,
    this.isVisibleError,
    this.title,
    this.controller,
    this.focusNode,
    this.error,
  }) : super(key: key);

  @override
  _TextAreaInputFormState createState() => _TextAreaInputFormState();
}

class _TextAreaInputFormState extends State<TextAreaInputForm> {
  bool obscureText = false;

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        FormStatusWidget(
          builder: (enable) {
            return Container(
              alignment: Alignment.centerLeft,
              padding: EdgeInsets.only(
                  left: getDp(31),
                  right: getDp(31),
                  top: getDp(10),
                  bottom: enable ? getDp(10) : 0.0),
              child: Row(
                children: [
                  Text(
                    '${widget.title}',
                    style: TextStyle(
                      color: aceDarkGrayColor,
                      fontSize: enable ? getSp(16) : getSp(14),
                      fontWeight: FontWeight.w400,
                      height: enable ? 16 / 14 : 1,
                    ),
                  ),
                  if (widget.error != null && enable == true)
                    Visibility(
                      visible: widget.isVisibleError == true,
                      child: Text(
                        ' ${widget.error}',
                        style: TextStyle(
                          color: aceRedColor,
                          fontSize: getSp(16),
                          fontWeight: FontWeight.w400,
                          height: enable ? 16 / 14 : 1,
                        ),
                      ),
                    ),
                ],
              ),
            );
          },
        ),
        FormStatusWidget(
          builder: (enable) {
            Widget text = Container(
              height: enable ? getDp(93) : null,
              margin: EdgeInsets.symmetric(
                horizontal: enable ? getDp(31) : 0,
              ),
              padding: EdgeInsets.symmetric(
                horizontal: enable ? getDp(8) : 0.0,
              ),
              decoration: BoxDecoration(
                borderRadius: enable ? BorderRadius.circular(15) : null,
                color: enable ? Colors.white : null,
                border: enable
                    ? Border.all(
                        color: aceGrayColor,
                        width: getDp(0.5),
                      )
                    : Border(
                        bottom:
                            BorderSide(color: aceGrayColor, width: getDp(0.5))),
                boxShadow: enable
                    ? [
                        BoxShadow(
                            color: Colors.black.withOpacity(0.25),
                            blurRadius: getDp(10),
                            spreadRadius: -getDp(5))
                      ]
                    : [],
              ),
              child: Padding(
                padding: EdgeInsets.symmetric(
                  horizontal: enable ? 0 : getDp(31),
                ),
                child: TextField(
                  inputFormatters: widget.inputFormatters,
                  controller: widget.controller,
                  focusNode: widget.focusNode,
                  scrollPadding: EdgeInsets.zero,
                  obscureText: obscureText,
                  keyboardType: widget.keyboardType,
                  maxLines: null,
                  buildCounter: enable
                      ? (
                          BuildContext context, {
                          int currentLength,
                          int maxLength,
                          bool isFocused,
                        }) {
                          return Text('');
                        }
                      : null,
                  maxLength: enable ? widget.maxSize : null,
                  enabled: FormEditStatusInheritedWidget.ofEnable(context),
                  style: TextStyle(
                      fontSize: enable ? getSp(16) : getDp(18),
                      color: enable ? aceBlueColor : aceBlackColor,
                      fontWeight: FontWeight.w700,
                      height: 16 / 16),
                  decoration: InputDecoration(
                      border: InputBorder.none,
                      focusedBorder: InputBorder.none,
                      disabledBorder: InputBorder.none,
                      labelText: widget.tip,
                      labelStyle: TextStyle(
                          color: widget.hasError ? aceRedColor : aceGrayColor,
                          fontWeight: FontWeight.w700,
                          fontSize: getSp(16),
                          height: 16 / 16)),
                ),
              ),
            );
            if (enable) {
              text = SizedBox(
                height: getDp(93),
                child: Stack(
                  children: [
                    text,
                    Positioned(
                        bottom: getDp(10),
                        right: getDp(49),
                        child: AnimatedBuilder(
                            animation: widget.controller,
                            builder: (BuildContext context, Widget child) {
                              return Text(
                                '${widget.controller.text.length}/${widget.maxSize}',
                                style: TextStyle(
                                  color: aceGrayColor,
                                  fontSize: getSp(12),
                                  fontWeight: FontWeight.w400,
                                  height: 14 / 12,
                                ),
                              );
                            })),
                  ],
                ),
              );
            }
            return Container(
              color: Colors.white,
              child: text,
            );
          },
        ),
        if (widget.helpText != null)
          Padding(
            padding: EdgeInsets.only(
              left: getDp(59),
              top: getDp(5),
            ),
            child: Text(
              widget.helpText,
              style: TextStyle(
                color: widget.hasError ? aceRedColor : aceDarkGrayColor,
                fontSize: getSp(12),
                fontWeight: FontWeight.bold,
                height: 16 / 12,
              ),
            ),
          ),
      ],
    );
  }
}
